import React, { useEffect, useState } from 'react'
import { useI18nChangeLanguage } from '@/hooks/i18n';
import i18n from '@/constants/i18n';
import { useTranslation } from 'react-i18next';
import { TouchableOpacity } from 'react-native';
import { Text } from 'react-native-ui-lib';
import { useColor } from '@/hooks/color';
import { useLoadedFontFamilyByAction } from '@/hooks/font';

interface II18nChangeProps {
  i18nChange?: string
}

const I18nChange: React.FC<II18nChangeProps> = ({ i18nChange = i18n.language }) => {
  const [language, setLanguage] = useState<string>("");
  const theme = useColor();
  const changeLanguage = () => setLanguage(language == 'en' ? 'zh' : 'en')
  useEffect(() => { setLanguage(i18nChange) }, [])
  useEffect(() => { useI18nChangeLanguage(language) }, [language])

  return (
    <TouchableOpacity onPress={changeLanguage}>
      <Text animated style={{ color: theme.color.action, ...useLoadedFontFamilyByAction('CHARACTER_SOUL') }}>{useTranslation().t('3003')}</Text>
    </TouchableOpacity >
  )
}

export default I18nChange;